<template>
  <h2>App父级组件</h2>
  <h3>msg:{{msg}}</h3>
  <!-- <h3>count:{{count}}</h3>//===setup的返回值示例 -->
  <button @click="msg += '==='">更新数据</button>
  <hr>
  <Child :msg='msg' msg2="字符串" @xxx="xxx"/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
//引入子级组件
import Child from './components/Child.vue'

export default defineComponent({
  name:"App",
  //注册组件
  components:{Child},
  setup() {
    //定义一个ref类型的数据
    const msg = ref('test test');

    //===setup的返回值示例
    const showMsg1 = () => {
      console.log('setup中的showMag1方法')
    }
    function xxx(txt:string) {
      msg.value += txt;
    }
    return {
      msg,
      showMsg1,
      xxx
    }
  },
  // data() {
  //   return {
  //     //===setup的返回值示例
  //     count:10
  //   }
  // },

  // //===setup的返回值示例
  // //界面渲染后的生命周期回调
  // mounted() {
  //   console.log(this)
  // },
  // //方法
  // methods:{
  //   //===setup的返回值示例
  //   showMsg2() {
  //     console.log('methods中的showMsg2方法')
  //   }
  // }
})
</script>

<style lang="scss" scoped>

</style>